<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本校对工具 - 上传文件</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        info: '#06b6d4',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            }
            .shadow-custom {
                box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-gradient-primary text-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-check-circle text-2xl mr-2"></i>
                <h1 class="text-xl font-bold">文本校对工具</h1>
            </div>
            <div class="text-sm">
                使用AI技术帮您检查文本中的错误和改进建议
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-12">
        <div class="max-w-3xl mx-auto">
            <div class="bg-white rounded-xl shadow-custom p-8 transform transition-all duration-500 hover:shadow-lg">
                <div class="text-center mb-8">
                    <i class="fa fa-file-text-o text-6xl text-primary mb-4"></i>
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">上传文本文件</h2>
                    <p class="text-gray-600">请上传TXT格式的文本文件，系统将自动分析并提供校对建议</p>
                </div>

                <form method="POST" enctype="multipart/form-data" class="space-y-6">
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all duration-300 hover:border-primary group">
                        <input type="file" name="file" id="fileInput" class="hidden" accept=".txt">
                        <label for="fileInput" class="cursor-pointer">
                            <div class="flex flex-col items-center">
                                <i class="fa fa-cloud-upload text-4xl text-gray-400 group-hover:text-primary transition-colors duration-300 mb-4"></i>
                                <p class="text-lg font-medium text-gray-700 mb-1">拖放文件到这里，或点击上传</p>
                                <p class="text-sm text-gray-500">支持的格式：.txt</p>
                            </div>
                        </label>
                    </div>

                    <div class="text-center">
                        <button type="submit" class="px-6 py-3 bg-primary text-white rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-md flex items-center justify-center mx-auto">
                            <i class="fa fa-check-circle mr-2"></i> 开始分析
                        </button>
                    </div>
                </form>

                <div class="mt-8 text-center">
                    <p class="text-sm text-gray-500">该工具将分析您的文本，检查以下内容：</p>
                    <div class="flex flex-wrap justify-center gap-2 mt-2">
                        <span class="px-3 py-1 bg-danger/10 text-danger rounded-full text-xs">错别字检查</span>
                        <span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-xs">建议修改</span>
                        <span class="px-3 py-1 bg-info/10 text-info rounded-full text-xs">标点符号</span>
                        <span class="px-3 py-1 bg-success/10 text-success rounded-full text-xs">敏感词</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-6 mt-8">
        <div class="container mx-auto px-4 text-center">
            <p class="text-sm">© 2025 文本校对工具 | 使用AI技术提供智能文本分析</p>
        </div>
    </footer>

    <script>
        // 文件上传交互
        const fileInput = document.getElementById('fileInput');
        const fileDropArea = fileInput.parentElement;

        // 拖放事件
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            fileDropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            fileDropArea.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            fileDropArea.addEventListener(eventName, unhighlight, false);
        });

        function highlight() {
            fileDropArea.classList.add('border-primary');
            fileDropArea.classList.add('bg-primary/5');
        }

        function unhighlight() {
            fileDropArea.classList.remove('border-primary');
            fileDropArea.classList.remove('bg-primary/5');
        }

        // 文件选择
        fileInput.addEventListener('change', handleFileSelect);

        function handleFileSelect(e) {
            const file = e.target.files[0];
            if (file) {
                alert(`已选择文件: ${file.name}`);
            }
        }

        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const mainContent = document.querySelector('main');
            mainContent.style.opacity = '0';
            mainContent.style.transform = 'translateY(20px)';
            mainContent.style.transition = 'opacity 0.5s ease, transform 0.5s ease';

            setTimeout(() => {
                mainContent.style.opacity = '1';
                mainContent.style.transform = 'translateY(0)';
            }, 100);
        });
    </script>
</body>
</html>